<script setup lang="ts">
 
 const goUserInfo = () => {
    uni.navigateTo({ url: '/pages/mypages/userInfo' })
 }
 const goTopUp = () => {
    uni.navigateTo({ url: '/pages/mypages/topup' })
 }

 const goAccount = () => {
    uni.navigateTo({ url: '/pages/mypages/account' })
 }

 const goService = () => {
    uni.navigateTo({ url: '/pages/mypages/service' })
 }
 const goIdea = () => {
    uni.navigateTo({ url: '/pages/mypages/idea' })
 }
</script>

<template>
    <view class="page">
        <view class="nav-bg">
            <view class="user">
                <image style="width: 120rpx;height: 120rpx;" src=""/>
                <text>用户名</text>
                <image @click="goUserInfo" style="width: 48rpx;height: 48rpx;" src=""/>
            </view>
        </view>
        <view class="points">
            <view>积分：49</view>
            <view @click="goTopUp" class="top-up">立即充值</view>
        </view>
        <view>
            <view @click="goAccount" class="bottom-item">平台账号 <image style="width: 48rpx;height: 48rpx;" src=""/> </view>
            <view @click="goService" class="bottom-item">联系客服 <image style="width: 48rpx;height: 48rpx;" src=""/></view>
            <view @click="goIdea" class="bottom-item">意见反馈 <image style="width: 48rpx;height: 48rpx;" src=""/></view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
    .page{
        position:fixed;
        width: 100%;
        height: 100%;
        background-color: rgb(246,248,251);
        .nav-bg{
            overflow: hidden;
            width: 100%;
            height: 404rpx;
            background:linear-gradient(87.73% 83.66% at 16% 94% rgba(226,239,255,1)0%,rgba(255,255,255,0)100%,rgba(255,255,255,0)101%);
            .user{
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 316rpx;
                height: 120rpx;
                margin: 208rpx 0 0 24rpx;
                font-size: 36rpx;
                color: rgb(48,49,51);
            }
        }
        .points{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 702rpx;
            height: 122rpx;
            margin: 0 auto;
            padding: 32rpx;
            box-sizing: border-box;
            color: #fff;
            font-size: 32rpx;
            font-weight: 500;
            transform: translateY(-22rpx);
            margin-bottom: 48rpx;
            .top-up{
                width: 168rpx;
                height: 60rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                box-shadow: 2rpx 2rpx 10rpx rgba(0,11,222,0.24);
                background-color: rgb(250,81,81);
                border-radius: 370rpx;
                font-size: 30rpx;
                color: #fff;

            }
        }
        .bottom-item{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 702rpx;
            height: 112rpx;
            background-color: #fff;
            padding: 32rpx;
            box-sizing: border-box;
            margin: 0 auto;
            margin-bottom: 32rpx;
            border-radius: 16rpx;
        }
    }
</style>